<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结婚请柬</title>
    <script src="../js/html2canvas.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #fef7f9 0%, #fffafc 50%, #fef7f9 100%);
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <div style="position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 15px;">
        <button onclick="changeFontSize(2)" style="background: linear-gradient(135deg, #db7093, #ffb6c1); color: white; border: none; padding: 12px 20px; border-radius: 25px; font-size: 14px; cursor: pointer; box-shadow: 0 5px 15px rgba(219, 112, 147, 0.3); transition: all 0.3s; font-family: inherit;">放大</button>
        <button onclick="changeFontSize(-2)" style="background: linear-gradient(135deg, #95a5a6, #bdc3c7); color: white; border: none; padding: 12px 20px; border-radius: 25px; font-size: 14px; cursor: pointer; box-shadow: 0 5px 15px rgba(149, 165, 166, 0.3); transition: all 0.3s; font-family: inherit;">缩小</button>
        <button onclick="exportToImage()" style="background: linear-gradient(135deg, #27ae60, #2ecc71); color: white; border: none; padding: 12px 20px; border-radius: 25px; font-size: 14px; cursor: pointer; box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3); transition: all 0.3s; font-family: inherit;">导出</button>
    </div>

    <div id="invitation-card" style="max-width: 800px; margin: 0 auto; background: white; border-radius: 24px; box-shadow: 0 20px 60px rgba(219, 112, 147, 0.15); overflow: hidden; position: relative;" contenteditable="true">
        
        <div style="position: absolute; top: 0; left: 0; right: 0; height: 300px; background: linear-gradient(135deg, #ffb6c1 0%, #db7093 100%); opacity: 0.05; z-index: 0;"></div>
        
        <div style="position: relative; z-index: 1; padding: 60px 40px 40px; text-align: center; background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%);">
            <div style="font-size: 14px; color: #db7093; letter-spacing: 8px; margin-bottom: 15px; font-weight: 300;">WEDDING INVITATION</div>
            <div style="font-size: 42px; color: #2c3e50; margin-bottom: 20px; font-weight: 300; line-height: 1.2;">
                执子之手<br>与子偕老
            </div>
            <div style="width: 60px; height: 2px; background: linear-gradient(90deg, #db7093, #ffb6c1); margin: 0 auto 25px;"></div>
            <div style="font-size: 16px; color: #7f8c8d; line-height: 1.6;">
                张明 & 李小红<br>
                <span style="font-size: 14px; color: #bdc3c7;">诚邀您见证我们的幸福时刻</span>
            </div>
        </div>

        <div style="position: relative; z-index: 1; padding: 30px 40px; background: rgba(255, 255, 255, 0.9);">

            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px;">
                <div style="position: relative;">
                    <label style="display: block; cursor: pointer;">
                        <div style="background: linear-gradient(135deg, #ffefef 0%, #fff5f5 100%); height: 150px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #db7093; font-size: 14px; border: 2px dashed #db7093; transition: all 0.3s;">
                            <div style="font-size: 24px; margin-bottom: 8px;">📷</div>
                            <div>选择照片</div>
                        </div>
                        <input type="file" accept="image/*" style="display: none;" onchange="handleImageUpload(this, 'photo1')">
                    </label>
                    <div id="photo1" style="height: 150px; border-radius: 12px; overflow: hidden; display: none; position: relative;">
                        <img src="" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.5); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;" onclick="replacePhoto('photo1')">↻</div>
                    </div>
                </div>

                <div style="position: relative;">
                    <label style="display: block; cursor: pointer;">
                        <div style="background: linear-gradient(135deg, #f0f8ff 0%, #f5faff 100%); height: 150px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #db7093; font-size: 14px; border: 2px dashed #db7093; transition: all 0.3s;">
                            <div style="font-size: 24px; margin-bottom: 8px;">💑</div>
                            <div>选择照片</div>
                        </div>
                        <input type="file" accept="image/*" style="display: none;" onchange="handleImageUpload(this, 'photo2')">
                    </label>
                    <div id="photo2" style="height: 150px; border-radius: 12px; overflow: hidden; display: none; position: relative;">
                        <img src="" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.5); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;" onclick="replacePhoto('photo2')">↻</div>
                    </div>
                </div>

                <div style="position: relative;">
                    <label style="display: block; cursor: pointer;">
                        <div style="background: linear-gradient(135deg, #f5f0ff 0%, #faf5ff 100%); height: 150px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #db7093; font-size: 14px; border: 2px dashed #db7093; transition: all 0.3s;">
                            <div style="font-size: 24px; margin-bottom: 8px;">❤️</div>
                            <div>选择照片</div>
                        </div>
                        <input type="file" accept="image/*" style="display: none;" onchange="handleImageUpload(this, 'photo3')">
                    </label>
                    <div id="photo3" style="height: 150px; border-radius: 12px; overflow: hidden; display: none; position: relative;">
                        <img src="" style="width: 100%; height: 100%; object-fit: cover;">
                        <div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.5); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;" onclick="replacePhoto('photo3')">↻</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="position: relative; z-index: 1; padding: 40px; background: rgba(255, 255, 255, 0.8);">
            <div style="text-align: center; margin-bottom: 40px;">
                <div style="font-size: 28px; color: #2c3e50; margin-bottom: 10px; font-weight: 400;">我们的爱情旅程</div>
                <div style="font-size: 14px; color: #7f8c8d;">FROM FIRST SIGHT TO FOREVER</div>
            </div>

            <div style="display: flex; align-items: center; margin-bottom: 40px; position: relative;">
                <div style="flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, #db7093, #ffb6c1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin-right: 30px; box-shadow: 0 8px 25px rgba(219, 112, 147, 0.3);">
                    💖
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 20px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">初次相遇</div>
                    <div style="font-size: 14px; color: #db7093; margin-bottom: 12px;">2018.10.15</div>
                    <div style="font-size: 15px; color: #5d6d7e; line-height: 1.6;">
                        在那个秋意正浓的午后，我们的目光第一次交汇，从此开启了这段美好的缘分。
                    </div>
                </div>
            </div>

            <div style="display: flex; align-items: center; margin-bottom: 40px; position: relative;">
                <div style="flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, #db7093, #ffb6c1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin-right: 30px; box-shadow: 0 8px 25px rgba(219, 112, 147, 0.3);">
                    🌸
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 20px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">相知相爱</div>
                    <div style="font-size: 14px; color: #db7093; margin-bottom: 12px;">2019-2021</div>
                    <div style="font-size: 15px; color: #5d6d7e; line-height: 1.6;">
                        我们一起走过四季轮回，在平凡的日子里积累着不平凡的爱意，让彼此成为生命中最重要的存在。
                    </div>
                </div>
            </div>

            <div style="display: flex; align-items: center; margin-bottom: 40px; position: relative;">
                <div style="flex-shrink: 0; width: 80px; height: 80px; background: linear-gradient(135deg, #db7093, #ffb6c1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; margin-right: 30px; box-shadow: 0 8px 25px rgba(219, 112, 147, 0.3);">
                    💍
                </div>
                <div style="flex: 1;">
                    <div style="font-size: 20px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">许下承诺</div>
                    <div style="font-size: 14px; color: #db7093; margin-bottom: 12px;">2022.04.18</div>
                    <div style="font-size: 15px; color: #5d6d7e; line-height: 1.6;">
                        在樱花盛开的季节，你单膝跪地，许我一世承诺。我愿意，用余生来回答这个浪漫的问题。
                    </div>
                </div>
            </div>
        </div>

        <div style="position: relative; z-index: 1; padding: 50px 40px; background: linear-gradient(135deg, #fffafc 0%, #fff5f8 100%);">
            <div style="text-align: center; margin-bottom: 40px;">
                <div style="font-size: 32px; color: #2c3e50; margin-bottom: 10px; font-weight: 400;">婚礼信息</div>
                <div style="font-size: 14px; color: #7f8c8d;">WEDDING DETAILS</div>
            </div>

            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-bottom: 40px;">
                <div style="background: white; padding: 30px 25px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(219, 112, 147, 0.1); border: 1px solid rgba(219, 112, 147, 0.08); transition: all 0.3s ease;">
                    <div style="font-size: 32px; color: #db7093; margin-bottom: 15px;">📅</div>
                    <div style="font-size: 16px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">婚礼日期</div>
                    <div style="font-size: 18px; color: #db7093; font-weight: 400;">2024年10月1日</div>
                    <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">星期二</div>
                </div>
                <div style="background: white; padding: 30px 25px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(219, 112, 147, 0.1); border: 1px solid rgba(219, 112, 147, 0.08); transition: all 0.3s ease;">
                    <div style="font-size: 32px; color: #db7093; margin-bottom: 15px;">⏰</div>
                    <div style="font-size: 16px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">典礼时间</div>
                    <div style="font-size: 18px; color: #db7093; font-weight: 400;">中午12:08</div>
                    <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">吉时良辰</div>
                </div>
                <div style="background: white; padding: 30px 25px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(219, 112, 147, 0.1); border: 1px solid rgba(219, 112, 147, 0.08); transition: all 0.3s ease;">
                    <div style="font-size: 32px; color: #db7093; margin-bottom: 15px;">📍</div>
                    <div style="font-size: 16px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">婚礼地点</div>
                    <div style="font-size: 18px; color: #db7093; font-weight: 400;">玫瑰花园酒店</div>
                    <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">宴会厅A</div>
                </div>
                <div style="background: white; padding: 30px 25px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(219, 112, 147, 0.1); border: 1px solid rgba(219, 112, 147, 0.08); transition: all 0.3s ease;">
                    <div style="font-size: 32px; color: #db7093; margin-bottom: 15px;">👔</div>
                    <div style="font-size: 16px; color: #2c3e50; margin-bottom: 8px; font-weight: 500;">着装要求</div>
                    <div style="font-size: 18px; color: #db7093; font-weight: 400;">正装礼服</div>
                    <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">优雅得体</div>
                </div>
            </div>
        </div>

        <div style="position: relative; z-index: 1; padding: 40px; background: white; text-align: center; border-top: 1px solid rgba(219, 112, 147, 0.1);">
            <div style="font-size: 28px; color: #2c3e50; margin-bottom: 20px; font-weight: 300; font-style: italic;">
                "愿得一人心，白首不相离"
            </div>
            <div style="font-size: 18px; color: #db7093; margin-bottom: 30px;">
                张明 & 李小红 敬上
            </div>
            <div style="font-size: 14px; color: #7f8c8d; line-height: 1.6;">
                玫瑰花园酒店 · 北京市朝阳区建国路1号<br>
                联系电话：138-XXXX-XXXX<br>
                <span style="font-size: 12px; color: #bdc3c7;">期待与您共襄盛举，见证我们的幸福时刻</span>
            </div>
        </div>

    </div>

    <script>
        let currentFontSize = 0;

        function changeFontSize(delta) {
            currentFontSize += delta;
            currentFontSize = Math.max(-10, Math.min(20, currentFontSize));
            
            const elements = document.querySelectorAll('#invitation-card *');
            elements.forEach(element => {
                const computedStyle = window.getComputedStyle(element);
                const currentSize = parseFloat(computedStyle.fontSize);
                if (currentSize > 8) {
                    element.style.fontSize = (currentSize + delta) + 'px';
                }
            });
        }

        function exportToImage() {
            const element = document.getElementById('invitation-card');
            
            html2canvas(element, {
                scale: 2,
                useCORS: true,
                allowTaint: true,
                backgroundColor: '#ffffff'
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '结婚请柬.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }

        function handleImageUpload(input, photoId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const base64 = e.target.result;
                    const photoContainer = document.getElementById(photoId);
                    const img = photoContainer.querySelector('img');
                    img.src = base64;
                    photoContainer.style.display = 'block';
                    input.parentElement.style.display = 'none';
                    
                    localStorage.setItem(photoId, base64);
                };
                reader.readAsDataURL(file);
            }
        }

        function replacePhoto(photoId) {
            const input = document.querySelector(`#${photoId}`).previousElementSibling.querySelector('input');
            input.click();
        }

        window.addEventListener('load', function() {
            const photoIds = ['photo1', 'photo2', 'photo3'];
            photoIds.forEach(id => {
                const savedPhoto = localStorage.getItem(id);
                if (savedPhoto) {
                    const photoContainer = document.getElementById(id);
                    const img = photoContainer.querySelector('img');
                    const input = photoContainer.previousElementSibling.querySelector('input');
                    
                    img.src = savedPhoto;
                    photoContainer.style.display = 'block';
                    input.parentElement.style.display = 'none';
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('div[style*="background: white;"]');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px)';
                    this.style.boxShadow = '0 15px 40px rgba(219, 112, 147, 0.2)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = '0 10px 30px rgba(219, 112, 147, 0.1)';
                });
            });

            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => {
                button.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-3px)';
                    this.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.2)';
                });
                button.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    if (this.textContent === '放大文字') {
                        this.style.boxShadow = '0 5px 15px rgba(219, 112, 147, 0.3)';
                    } else if (this.textContent === '缩小文字') {
                        this.style.boxShadow = '0 5px 15px rgba(149, 165, 166, 0.3)';
                    } else {
                        this.style.boxShadow = '0 5px 15px rgba(39, 174, 96, 0.3)';
                    }
                });
            });

            const uploadAreas = document.querySelectorAll('label[style*="cursor: pointer"]');
            uploadAreas.forEach(area => {
                area.addEventListener('mouseenter', function() {
                    this.querySelector('div').style.transform = 'scale(1.02)';
                    this.querySelector('div').style.boxShadow = '0 5px 15px rgba(219, 112, 147, 0.2)';
                });
                area.addEventListener('mouseleave', function() {
                    this.querySelector('div').style.transform = 'scale(1)';
                    this.querySelector('div').style.boxShadow = 'none';
                });
            });

            const photoContainers = document.querySelectorAll('div[id^="photo"]');
            photoContainers.forEach(container => {
                container.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.02)';
                    this.style.boxShadow = '0 8px 25px rgba(219, 112, 147, 0.3)';
                });
                container.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                    this.style.boxShadow = 'none';
                });
            });
        });
    </script>

</body>
</html>